<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .tuijian li {
            display: flex;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        li img {
            width: 30%;
        }
    </style>

</head>

<body>
    <ul class="tuijian" id="tuijian">

    </ul>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(function () {
            //创建promise对象
            var p = new Promise(function (resolve, reject) {
                $.ajax({
                    type: "post",
                    url: "http://www.51houniao.com/product/product/getProductRecommendUser",
                    data: JSON.stringify({
                        desc: false,
                        orderBy: "top",
                        pageNow: 1,
                        pageSize: 20,
                        seller_user_id: "4bc4027c645343f09a964b5c2e9f875b"
                    }),
                    contentType: "application/json;charset=UTF-8",
                    success: function (data) {
                        //获取数据，之后打印，看看数据是否存在
                        console.log(data);
                        //返回正确的数
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err);
                    }
                })
            });

            //promise的调用
            p.then((data) => {
                console.log(data);
                var str = '';
                data.forEach(item => {
                    str += `<li>
                        <img src="${item.proPicUrl}" />
                        ${item.proTitle}
                        
                        </li>`;
                })
                $('#tuijian').html(str);
            }, (err) => {
                console.log("请求出错了", err);
            })

        })
    </script>
</body>

</html>